<template>
  <div class="map-drawer dmt-data-panel" :class="{ 'is-open': drawer.showDrawer, }" v-if="drawer.showDrawer" :style="{height:infoData.currentMode=='history'? 'calc(100% - 120px)': 'calc(100% - 70px)'}">
    <div class="flight-header">
      <div class="flight-info">
        <div class="flight-number">
          <span class="label">飞机编号:</span>
          <span class="value">{{  infoData.currentData.id || '--' }}</span>
        </div>
        <div class="flight-position">
          <span class="label">经纬度:</span>
          <span class="value">{{ infoData.currentData.longitude }}, {{ infoData.currentData?.latitude
          }}</span>
        </div>
        <div class="flight-altitude">
          <span class="label">高度:</span>
          <span class="value">{{ infoData.currentData?.altitude || '--' }} 米</span>
        </div>
      </div>
      <div class="header-actions">
        <div class="close-btn" @click="closeDrawer">
          <span class="close-icon">×</span>
        </div>
      </div>
    </div>

    <div class="data-tabs">
      <div class="tab" :class="{ active: activeTab === 'flight' }" @click="handleTabChange('flight')">飞行参数</div>
      <div class="tab" :class="{ active: activeTab === 'radar' }" @click="handleTabChange('radar')">雷达剖面</div>
      <div class="tab" :class="{ active: activeTab === 'dmt' }" @click="handleTabChange('dmt')">机载探测</div>
      <div class="tab" :class="{ active: activeTab === 'message' }" @click="handleTabChange('message')">消息中心</div>
    </div>

    <!-- 飞行参数内容 -->
    <FlightPanel v-if="activeTab === 'flight'" :active="activeTab === 'flight'"
      ref="flightPanelRef" />

    <!-- 雷达剖面内容 -->
    <RadarPanel v-else-if="activeTab === 'radar'" :active="activeTab === 'radar'" />

    <!-- DMT探测内容 -->
    <DmtPanel v-else-if="activeTab === 'dmt'" :flight-no="flightInfo.flightNo" :active="activeTab === 'dmt'"
      ref="dmtPanelRef" @update:dmt-data="handleDmtDataUpdate" />

    <!-- 消息中心内容 -->
    <MessagePanel v-else-if="activeTab === 'message'" flight-no="20250603_B12PW_01" :active="activeTab === 'message'"
      ref="messagePanelRef" />
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted, onUnmounted, watch, inject, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import FlightPanel from './components/FlightPanel.vue';
import RadarPanel from './components/RadarPanel.vue';
import DmtPanel from './components/DmtPanel.vue';
import MessagePanel from './components/MessagePanel.vue';
import drawerStore from "@/stores/modules/drawer";
import useInfoDataStore from "@/stores/modules/infoData";


const drawer = drawerStore();
const infoData = useInfoDataStore();

const props = defineProps({
  flightData: {
    type: Object,
    default: () => ({})
  },
});

const activeTab = ref(infoData.activeTab);
// 组件引用
const flightPanelRef = ref(null);
const dmtPanelRef = ref(null);
const messagePanelRef = ref(null);

// 航班信息
const flightInfo = ref(infoData.flightInfo);



// 关闭抽屉并通知父组件
const closeDrawerAndNotify = () => {
  drawer.toggleDrawer();
  resetData();
};

const closeDrawer = () => {
  closeDrawerAndNotify();
};

// 重置所有数据状态
const resetData = () => {
  infoData.resetData();
};

// 处理标签切换
const handleTabChange = (tab) => {
  if (activeTab.value === tab) return;

  activeTab.value = tab;
};


// 处理数据更新
const handleDmtDataUpdate = (data) => {
  if (data) {
    Object.assign(dmtData.value, data);
  }
};




defineExpose({
  closeDrawerAndNotify
});
</script>

<style lang="scss" scoped>
.dmt-data-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;

  .flight-header {
    background-color: #f0f6ff;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e9ff;

    .flight-info {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;

      .flight-number,
      .flight-position,
      .flight-altitude {
        display: flex;
        align-items: center;

        .label {
          color: #666;
          margin-right: 5px;
          font-size: 14px;
        }

        .value {
          color: #333;
          font-weight: 600;
          font-size: 14px;
        }
      }
    }

    .header-actions {
      display: flex;
      gap: 10px;
      align-items: center;

      .refresh-btn {
        font-size: 18px;
        color: #409EFF;
        cursor: pointer;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s;

        &:hover {
          background-color: rgba(64, 158, 255, 0.1);
          transform: rotate(180deg);
        }
      }

      .close-btn {
        font-size: 22px;
        color: #ff6b6b;
        cursor: pointer;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s;

        &:hover {
          background-color: rgba(255, 107, 107, 0.1);
        }
      }
    }
  }

  .data-tabs {
    display: flex;
    border-bottom: 1px solid #e0e9ff;
    background-color: #fff;

    .tab {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
      border-bottom: 2px solid transparent;

      &.active {
        border-bottom-color: #409EFF;
        color: #409EFF;
        font-weight: 500;
      }

      &:hover:not(.active) {
        color: #66b1ff;
        background-color: #f5f9ff;
      }
    }
  }
}

.map-drawer {
  position: absolute;
  top: 60px;
  right: -700px;
  width: 700px;
  height: calc(100% - 70px);
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
  border-radius: 12px 0 0 12px;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(10px);

  &.dmt-drawer {
    background-color: rgba(243, 249, 255, 0.95);
  }

  &.is-open {
    right: 0;
    animation: slide-in 0.3s ease-out forwards;
  }

  @keyframes slide-in {
    from {
      transform: translateX(20px);
      opacity: 0.8;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}

.close-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;

  &:hover {
    background-color: #f5f7fa;
  }

  .close-icon {
    font-size: 20px;
    line-height: 1;
  }
}
</style>